<template>
    <el-container class="sys_parameter">
        <el-main>
            <el-card class="box-card">
                <div class="buttons">
                    <el-row :gutter="15">
                        <el-col :span="16">
                            <el-button icon="el-icon-refresh-right" @click="getList"/>
                            <el-button type="success" icon="fa fa-pencil" @click="openDialog" v-permission="'save_sys_param'"/>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="searchValue" placeholder="搜索" clearable
                                     style="width: calc(100% - 30px);"
                                      @keyup.enter.native="getList"></el-input>
                            <el-button icon="el-icon-search" @click="getList"/>
                        </el-col>
                    </el-row>
                </div>
                <!-- <tableTemplate :data="dataList" :options="tableOptions" @handleSelectionChange="handleSelectionChange"
                               @handleChangePage="handleChangePage"/> -->
                <vxeTableTemplate :data="dataList" :options.sync="tableOptions" @handleSelectionChange="handleSelectionChange"
                               @handleChangePage="handleChangePage"/>
            </el-card>

            <el-dialog :title="dialogOption.title" :visible.sync="dialogOption.visible" width="600px" v-dialogDrag>
                <el-form ref="parameterForm" :rules="parameterForm.key1 === 'view_attach' ? attachRules : rules" :model="parameterForm" label-width="100px">
                    <el-form-item label="参数名称" prop="name">
                        <el-input v-model="parameterForm.name" autocomplete="off" placeholder="请输入参数名称"></el-input>
                    </el-form-item>
                    <el-form-item label="参数值" prop="value">
                        <el-input v-if="parameterForm.key1 === 'view_attach'" v-model="parameterForm.value"
                                  autocomplete="off" placeholder="请输入参数值" type="textarea" rows="5"></el-input>
                        <el-input v-else v-model="parameterForm.value" autocomplete="off" placeholder="请输入参数值">
                            <template slot="append" v-if="$utils.isNotEmpty(parameterForm.name) && parameterForm.name.indexOf('率') !== -1">%</template>
                        </el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogOption.visible = false">取 消</el-button>
                    <el-button type="primary" @click="saveOrUpdateParameter" v-btnLoading>确 定</el-button>
                </div>
            </el-dialog>

        </el-main>
    </el-container>
</template>

<script>
    import commonParameterValueApi from "@common/api/common/commonParameterValueApi";

    export default {
        name: "SysCommonParameter",
        data () {
            let $this = this;
            return {
                key1:undefined,
                dataList: [],
                tableOptions: {
                    ref: 'ParameterTable',
                    container: '#parameter_container',
                    multiSelect: true,
                    columns: [{
                        label: '参数名称',
                        prop: 'name',
                        align: 'center',
                    }, {
                        label: '参数值',
                        prop: 'value',
                        align: 'center',
                        formatter: (row) => {
                            if (row.value) {
                                if ($this.$utils.isNotEmpty(row.name) && row.name.indexOf('率') !== -1) {
                                    return row.value + '%';
                                }
                            }
                            return row.value;
                        }
                    }],
                    pagination: {
                        pageIndex: 1,
                    }
                },
                selectionList: [],
                rules: {
                    name: [
                        {required: true, message: '请输入参数名称', trigger: 'blur'},
                        {pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,32}$/, message: '最大 32 位大小写英文、数字或者其它地区语言字符，不能包含特殊字符'}
                    ],
                    value: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        //目前只兼容中文、大小写英文、数字
                        {pattern: /^[A-Za-z0-9+-_.]{1,32}$/, message: '最大32位字符，大小写英文、数字或者以下特殊字符（+-_.），不能包含特殊字符'}
                    ],
                },
                attachRules: {
                    name: [
                        {required: true, message: '请输入参数名称', trigger: 'blur'},
                    ],
                    value: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                    ],
                },
                //弹窗option
                dialogOption: {
                    visible: false,
                },
                //编辑新增的form数据
                parameterForm: {},
                searchValue: '',
            }
        },
        mounted () {
            this.key1 = this.$route.query.key1;
            this.getList();
        },
        methods: {
            getList (search) {
                let $this = this;
                let queryData = {}
                $this.dataList = [];
                if (search) {
                    $this.tableOptions = $this.resetTablePagination($this.tableOptions);
                }
                queryData.key1 = $this.key1;
                queryData.searchValue = $this.searchValue;
                queryData = $this.getQueryParams($this.tableOptions, queryData);
                commonParameterValueApi.findCommonParameters(queryData, result => {
                    $this.dataList = result.data || [];
                    $this.tableOptions = $this.setTableTotal($this.tableOptions, result);
                })
            },
            //新增/编辑
            openDialog () {
                let $this = this;
                if ($this.selectionList.length === 1) {
                    $this.parameterForm = {
                        id: $this.selectionList[0].id,
                        name: $this.selectionList[0].name,
                        value: $this.selectionList[0].value,
                        key1: $this.selectionList[0].key1,
                    };
                } else {
                    if ($this.selectionList.length > 1) {
                        $this.$message.error("不能同时编辑多条数据");
                    } else if ($this.selectionList.length === 0) {
                        $this.$message.error("请选中一条数据");
                    }
                    return;
                }
                $this.dialogOption = $.extend({}, $this.dialogOption, {
                    title: '编辑',
                    visible: true,
                })
            },
            //保存/更新Unit
            saveOrUpdateParameter () {
                let $this = this;
                $this.$refs['parameterForm'].validate(valid => {
                    if (valid) {
                        commonParameterValueApi.saveCommonParameterValue($this.parameterForm, () => {
                            $this.dialogOption = $.extend({}, $this.dialogOption, {
                                visible: false,
                            })
                            $this.$message.success('保存成功！');
                            $this.getList();
                        })
                    } else {
                        return false;
                    }
                });

            },
            handleChangePage (page) {
                let $this = this;
                $this.tableOptions.pagination.pageIndex = page.pageIndex;
                $this.tableOptions.pagination.pageSize = page.pageSize;
                $this.getList();
            },
            //选中
            handleSelectionChange (val) {
                this.selectionList = val;
            },
        },
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .sys_parameter {
        height: 100%;

        .buttons {
            margin: 0 0 10px 0;
        }
    }
</style>
